<template>
    <div>
        <PageCard title="标签管理列表">
            <template #actions>
                <el-button class="ed-button ed_black-bottom ed-button36" @click="addType()"><svg-icon icon-class="add-svg" v-has="'shopping:tag:add'" />添加标签</el-button>
            </template>
            <ApiTable :api="load" ref="table" @cellMouseenterHover="cellMouseenterHover" @cellMouseLeaveHover="cellMouseLeaveHover">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="tagName" label="标签名称"/>
                <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间"/>
                <el-table-column :show-overflow-tooltip="true" prop="" label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" @click="updateRow(scope.row)" v-has="'shopping:tag:edit'" >编辑</el-button>
                        <el-button class="ed-table-bottom ed_delete_border" @click="del(scope.row)" v-has="'shopping:tag:delete'" >删除</el-button>
                        <i v-if="scope.row.id == hoverId" class="el-icon-top up-arrow colorBlue fontSize16 marginLeft40 fontWeightBold cursorPointer" @click="up(scope.row)"></i>
                        <i v-if="scope.row.id == hoverId" class="el-icon-bottom down-arrow colorBlue fontSize16 marginLeft15 fontWeightBold cursorPointer" @click="down(scope.row)"></i>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <EdDialog ref="dialogRef" v-if="showCode" width="490px" :title="title" @close-dialog="closeDialog" @save-dialog="saveDialog">
            <el-form :model="form" ref="formRef" size="small" label-position='right' label-width="auto">
                <el-form-item label="标签名称" class="margin0" :rules="$validate.validates({required:true,msg:'标签名称不能为空'})" prop="tagName">
                    <el-input v-model="form.tagName" style="width: 275px" placeholder="请输入标签名称" maxlength="50" ></el-input>
                </el-form-item>
            </el-form>
<!--            <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogVisible = false;$refs.formRef.resetFields();" class="el-button-primary-no">取&nbsp;&nbsp;消</el-button>-->
<!--                <el-button type="primary" class="el-button-primary-style marginLeft8" @click="save('formRef')">确&nbsp;&nbsp;定</el-button>-->
<!--            </span>-->
        </EdDialog>
        <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
    </div>

</template>

<script>
    import EdDialog from 'src/components/EdDialog.vue'
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import EdTable from "src/components/EdTable.vue";
    import {addTag ,updateTag ,delTag ,moveDownTag ,moveUpTag ,listTag} from "./api.js";
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    import { defineComponent } from 'vue'
    export default defineComponent({
        name: "TagList",
        components:{
            EdTable,
            EdConfirmDelete,
            Page, PageCard, ApiTable,
            EdDialog
        },
        data(){
          return{
              showCode:false,
              form:{
                  tagName:""
              },
              hoverId:null,
              confirmRow:{},
              title:"添加标签"
          }
        },
        mounted(){
            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })
        },
        methods:{
            load:listTag,
            cellMouseenterHover(row) {
                this.hoverId = row.id
            },
            cellMouseLeaveHover(row) {
                this.hoverId = null
            },
            addType(){
                this.title = "添加标签";
                this.showCode = true;
                this.$nextTick(()=>{
                    this.form = {
                        tagName:""
                    };
                    this.$refs.formRef.clearValidate("tagName");
                })
            },
            updateRow(row){
                this.form.tagName = row.tagName;
                this.form.id = row.id;
                this.title = "编辑标签";
                this.showCode = true;
            },
            closeDialog(){
                this.$refs.formRef.resetFields();
                this.showCode = false;
                this.close()
            },
            saveDialog(){
                this.save('formRef')
            },
            del(row) {
                this.confirmRow = row;
                this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
            },
            confirmDeleteTrue(){
                delTag({id: this.confirmRow.id}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '标签删除成功',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load(1)
                    }
                })
            },
            up(row){
                moveUpTag({id: row.id}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '标签上移成功',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load(1)
                    }
                })
            },
            down(row){
                moveDownTag({id: row.id}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '标签下移成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load(1)
                    }
                })
            },
            save(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.disabled = true;
                        this.showCode = false;
                        let urlFn = null;
                        if(this.form.id){
                            urlFn = updateTag
                        }else {
                            urlFn = addTag
                        }
                        urlFn(this.form).then(response => {
                            if(response.success) {
                                this.$message.success({
                                    message:  this.form.id ? "修改成功" : "添加成功",
                                    duration: 2000,
                                    center:true
                                });
                                this.$nextTick(()=>{
                                    this.$refs.table.load(1)
                                })
                                this.disabled = false;
                                this.dialogVisible = false;
                                this.$refs.dialogRef.close()
                            }else {
                                this.disabled = false
                            }
                        }).catch(()=>{
                            this.disabled = false
                        })
                        this.$refs.dialogRef.hideLoading()
                    }else {
                        this.$refs.dialogRef.hideLoading()
                    }
                })
            },
            close(){
                this.form = {
                    tagName:""
                };
            }
        }
    })
</script>

<style scoped>
        :deep(.up-arrow) {
    visibility: hidden; 
    
    }
    :deep(.down-arrow) {
        visibility: hidden; 
        
    }
    :deep(.table-row:hover .up-arrow) {
        visibility: visible;
        
    }
    :deep(.table-row:hover .down-arrow) {
        visibility: visible; 
        
    }

    :deep(.table-row:first-of-type .up-arrow) {
        opacity: 0.3;
        pointer-events: none;
    }
    :deep(.table-row:last-of-type .down-arrow) {
        opacity: 0.3;
        pointer-events: none;
    }
</style>